<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--css样式-->
    <style>
        body {
            background: url(static/images/Login.jpg) no-repeat center center fixed;
            background-size: cover;
        }

        #login-box {
            width: 30%;
            height: auto;
            margin: 0 auto;
            margin-top: 13%;
            text-align: center;
            background: #00000060;
            padding: 20px 50px;

        }

        #login-box h1 {
            color: yellow;
        }

        form {
            color: black;
            font-size: 18px;
            font-weight: bolder;
        }

        #login-box .form .item {
            margin-top: 15px;
        }

        #login-box .form .item i {
            font-size: 18px;
            color: #fff;
        }

        #login-box .form .item input {
            width: 180px;
            font-size: 15px;
            border: 0;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            background: #ffffff00;
            color: #fff;
        }

        #login-box button {
            margin-top: 20px;
            width: 190px;
            height: 30px;
            font-size: 20px;
            font-weight: 700;
            color: white;
            background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
            border: 0;
            border-radius: 15px;
        }

        .register {
            display: block;
            margin-top: 12px;
        }


        a {
            text-decoration: none; /*去掉超链接的下划线*/
            font-size: 15px; /*设置超链接的字体为15px*/
            list-style: none;
            color: purple;
        }

        #login-box a:hover {
            color: yellow; /*鼠标悬停时的字体颜色*/
            font-size: 20px; /*鼠标悬停时的字体大小是20px*/
        }

        .radio-choice {
            margin-top: 12px;
        }

        .wait_time {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.8;
            z-index: 999;
        }

        .wait_time .outside_box {
            display: none;
            position: relative;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 50%;
            /* opacity: .1; */
        }

        .wait_time .inside_box {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: beige;
            border-radius: 50%;
            transition: all 0.5s;
        }
    </style>

    <script>
        // 提交登录信息前进行简单的前端验证
        function myCheck() {
            let b1 = /^\d{10}$/.test($("#telephone").val());
            let b2 = /^\d{6}$/.test($("#loginPwd").val());
            return (b1 && b2);
        }

        // 执行登录操作（发送ajax请求，执行回调函数等等）
        $(function () {
            $("#btn").click(function () {
                if (myCheck()) {

                    $.ajax({
                        type: "POST",
                        url: "/anyview/user/login",
                        data: {
                            "num": $("#telephone").val(),
                            "password": $("#loginPwd").val(),
                            "loginPosition": $(":radio:checked").val()
                        },
                        success: function (result) {
                            if (result.success) {
                                if ($(":radio:checked").val() === "student") {
                                    wait("Student.html?token=" + result.data, result.success);
                                }

                                if ($(":radio:checked").val() === "admin") {
                                    console.log(result)
                                    wait("Admin.html?token=" + result.data, result.success);
                                }
                            } else {
                                wait("Login.html", result.success);
                                $("#telephone").val("");
                                $("#loginPwd").val("");
                            }
                        }
                    });

                } else {
                    alert("您输入的学工号或者密码格式不正确！");
                    $("#telephone").val("");
                    $("#loginPwd").val("");
                }
            });
        });
    </script>

</head>
<body>

<!--登录页面的大div-->
<div id="login-box">

    <div class="form">
        <h1>Login Interface</h1>
        <div class="item">
            <i class="fa fa-github-alt" style="font-size:24px"></i>
            学工号：<input type="text" name="num" id="telephone" placeholder="请输入您的手机号" required>
        </div>
        <div class="item">
            <i class="fa fa-search" style="font-size:24px"></i>
            登录密码：<input type="password" name="password" id="loginPwd" placeholder="请输入您的密码" required>
        </div>
        <div class="radio-choice">
            <input type="radio" name="loginPosition" value="student" checked>学生
            <input type="radio" name="loginPosition" value="admin">管理员
        </div>
    </div>
    <span style="color: red;font-size: 12px"></span>

    <button id="btn">Login</button>
    <a href="Register.html" class="register">立即注册</a>
</div>

<!-- 等待时间出现的盒子 -->
<div class="wait_time">
    <div class="outside_box">
        <div class="inside_box"></div>
    </div>
</div>

<script>
    function wait(url, x) {
        var wait_time = document.querySelector('.wait_time');
        wait_time.style.display = 'block';
        wait_time.children[0].style.display = 'block';
        wait_time.children[0].children[0].style.display = 'block';
        var timer_01 = setInterval(function () {
            if (wait_time.children[0].children[0].style.width == '100px') {
                wait_time.children[0].children[0].style.width = '200px';
                wait_time.children[0].children[0].style.height = '200px';
                wait_time.children[0].children[0].style.marginLeft = '-100px';
                wait_time.children[0].children[0].style.marginTop = '-100px';
            } else {
                wait_time.children[0].children[0].style.width = '100px';
                wait_time.children[0].children[0].style.height = '100px';
                wait_time.children[0].children[0].style.marginLeft = '-50px';
                wait_time.children[0].children[0].style.marginTop = '-50px';
            }
        }, 500);

        var timer_02 = setTimeout(function () {
            if (!x) {
                alert("账号或密码错误，登录失败！");
            }
            // console.log();
            window.location.href = url;
        }, 3000);
    }
</script>
</body>
</html>